import React from 'react'
import { connect } from 'react-redux'
import { messages } from "share/common";
import { Button, message, Popover } from 'antd';
import SlideFrame from 'components/slide-frame';
import SearchArea from 'components/search-area';
import RuleDefinedRule from 'containers/financial-account/interface-definition/rule-defined-rule';
import interfaceService from "containers/financial-account/interface-definition/interface-service";
import ResizeTable from 'components/resize-table'

class ruleDefined extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchForm: [
        {
          type: 'input',
          id: 'ruleNameOrCode',
          label: messages('financial-account.key183')/*规则编码或名称*/
        }
      ],
      searchParams: {},
      columns: [
        { title: messages('financial-account.key184')/*规则编码*/, dataIndex: 'ruleCode' },
        { title: messages('financial-account.key25')/*规则名称*/, dataIndex: 'ruleName' },
        {
          title: messages('financial-account.key176')/*规则说明*/,
          dataIndex: 'description',
          width: '30%',
          render: value => <Popover content={value} placement={'topLeft'}>{value}</Popover>
        },
        {
          title: messages('financial-account.key185')/*规则*/,
          dataIndex: 'ruleDetail',
          width: 96,
          render: (value) => value ? messages('common.yes')/*是*/ : messages('common.no')/*否*/
        },
        {
          title: messages('common.column.status')/*状态*/,
          dataIndex: 'isEnable',
          width: 80,
          render: (value) => value ? messages('common.valid')/*生效*/ : messages('financial-account.key6')/*不生效*/
        },
        {
          title: messages('common.operation')/*操作*/, dataIndex: 'operation', width: 110, render: (value, record) => {
            return <span>
              <a onClick={e => this.handleEdit(e, record)}>{messages('common.edit')/*编辑*/}</a>
            </span>;
          }
        }
      ],
      data: [],
      loading: false,
      pagination: {
        total: 0
      },
      page: 0,
      showSlideFrame: false,
      title: '',
      editRecord: {},
      interfaceRecord: {},
    }
  }

  componentWillMount() {
    this.setState({ interfaceRecord: this.props.recordInfo }, () => {
      this.getList();
    });
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ interfaceRecord: nextProps.recordInfo });
  }

  getList = () => {
    const { searchParams, page, interfaceRecord } = this.state;
    let temp = {
      functionId: interfaceRecord.id,
      ruleNameOrCode: searchParams.ruleNameOrCode
    };
    Object.keys(temp).map(item => {
      !temp[item] && delete temp[item];
    });
    temp.page = page;
    this.setState({ loading: true });
    interfaceService.getRuleList(temp).then(res => {
      this.setState({
        loading: false,
        data: res.data.rows,
        pagination: {
          total: Number(res.data.total),
          current: page + 1,
          onChange: this.onChangePager,
        }
      });
    }).catch(e => {
      message.error(e.response.data.message);
      this.setState({ loading: false });
    })
  };

  onChangePager = (page) => {
    if (page - 1 !== this.state.page)
      this.setState({
        page: page - 1
      }, () => {
        this.getList();
      })
  };

  search = (result) => {
    const { searchParams } = this.state;
    searchParams.ruleNameOrCode = result.ruleNameOrCode;
    this.setState({ searchParams, page: 0 }, () => {
      this.getList();
    })
  };

  clear = () => {
    this.setState({ searchParams: {} }, () => {
      this.getList();
    })
  };

  handleEdit = (e, record) => {
    e.stopPropagation();
    this.setState({
      title: messages('financial-account.key186')/*编辑规则*/,
      editRecord: record
    }, () => {
      this.setState({ showSlideFrame: true });
    })
  };

  handleNew = () => {
    this.setState({
      title: messages('financial-account.key187')/*新建规则*/,
      editRecord: {}
    }, () => {
      this.setState({ showSlideFrame: true });
    })
  };

  isRefresh = (isRefresh) => {
    this.setState({ showSlideFrame: false });
    isRefresh === true && this.getList();
  };

  render() {
    const { searchForm, columns, data, loading, pagination, showSlideFrame, editRecord, title, interfaceRecord } = this.state;
    return (
      <div>
        <SearchArea searchForm={searchForm}
                    submitHandle={this.search}
                    clearHandle={this.clear}/>
        <div style={{ margin: '10px 0px' }}>
          <Button type="primary" onClick={this.handleNew}>{messages('common.create')}</Button>
        </div>
        <ResizeTable
          columns={columns}
          dataSource={data}
          loading={loading}
          rowKey={'id'}
          pagination={pagination}
          bordered/>
        <SlideFrame show={showSlideFrame}
                    title={title}
                    params={{
                      showSlideFrame,
                      editRecord,
                      interfaceRecord
                    }}
                    content={RuleDefinedRule}
                    onClose={(isRefresh) => this.isRefresh(isRefresh)}
                    afterClose={(isRefresh) => this.isRefresh(isRefresh)}/>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {}
}

ruleDefined.contextTypes = {
  router: React.PropTypes.object
};

export default connect(mapStateToProps)(ruleDefined);
